<template>
  <div class="app-container">
    <el-button type="normal" plain @click="addDEtail" class="m-b-20">添加详情</el-button>
    <el-table :data="list.results" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='ID' width="95">
        <template slot-scope="scope">
                {{scope.row.id}}
</template>
      </el-table-column>
      <el-table-column label="标题" >
<template slot-scope="scope">
   {{scope.row.title}}
</template>
      </el-table-column>
      <!-- <el-table-column label="详情" width="300" align="center">
<template slot-scope="scope">
  <span>
              </span>
</template>
      </el-table-column> -->
      <el-table-column label="时间"  align="center">
<template slot-scope="scope">
   {{scope.row.time|UtcTime}}
</template>
      </el-table-column>

       </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
         <span>
  <el-button type="danger" plain @click="dele(scope.row.id)">删除</el-button>
  </span>
  <span>

                  <el-button type="success" plain @click="check_Detail(scope.row.id)">查看详情</el-button>
  </span>
  </template>
      </el-table-column>

    </el-table>
   <el-pagination
   style="margin-top:20px;"
   background
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
       :current-page.sync="pangeNo"
       :page-size="pageSize"
      :total="total">
</el-pagination>
  </div>
</template>

<script>
  import {
    getList,
    delWork
  } from '@/api/table'
  
  export default {
    data() {
      return {
        list: null,
        listLoading: true,
        pageSize: 10,
        total: 100,
        pageNo: 1,
        listQuery: {}
      }
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    created() {
      this.listQuery = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      console.log('listQuery')
      console.log(this.listQuery)
      this.fetchData()
    },
    methods: {
      dele(id) {
        this.$confirm('确认删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await delWork({ id })
            .then((e) => {
              console.log(e)
              if (e.code == 2000) {
                setTimeout(() => {
                  this.fetchData()
                }, 1000)
              }
            })
            .catch((e) => {
              console.log(e)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      addDEtail() {
        this.$router.push('/Work/addDEtail')
      },
      check_Detail(e) {
        console.log('check_detail')
        console.log(e)
        this.$router.push({
          path: '/Work/workDetail',
          query: {
            id: e
          }
        })
      },
      handleCurrentChange(e) {
        console.log('currentPage')
        console.log(e)
        this.listQuery = {
          pageNo: e,
          pageSize: this.pageSize
        }
        this.fetchData()
      },
      pre_page(e) {
        console.log('prepage')
        console.log(e)
      },
      next_page(e) {
        console.log('next_page')
        console.log(e)
      },
      fetchData() {
        this.listLoading = true
        getList(this.listQuery).then(response => {
          console.log('list______')
          console.log(response)
  
          this.list = response.data
          this.total = response.data.total
          this.listLoading = false
        })
      }
    }
  }
</script>

<style lang="scss">
  .m-b-20 {
    margin-bottom: 20px;
  }
</style>